<!-- 
All rights Reserved, Designed By www.youyacao.com 
@Description:购买页面
@author:成都市一颗优雅草科技有限公司     
@version V3.0
@松鼠聚合直播系统
注意：本前端源码遵循 蜻蜓优雅草产品开源授权协议，本内容仅限于个人参考，禁止用于其他的商业用途
需要商业用途或者定制开发等可访问songshu.youyacao.com   联系QQ:422108995 23625059584

 -->











<template>
	<view>
		      <div>
		        <div class="input-box">
		          <div class="input-bg">
		            <input class="input" type="text" name="km" v-model="card_no"  @confirm="activeCard()" placeholder="请输入卡密" />
		          </div>
		        </div>
		        <div style="text-align: center;">
		          <img style="width: 714rpx; height: 105rpx;" src="~@/static/xufeibtn.png" @click="activeCard()"/>
		        </div>
		        <div style="text-align: center;padding: 30px 0px;">
		          <img style="width: 714rpx; height: 105rpx;" src="~@/static/buybtn.png" @click="buyCard()"/>
		        </div>
		      </div>
		      <view class="grid-box">
		        <view class="grid-item">
		          <img style="width: 316rpx; height: 200rpx;" src="~@/static/month_card.png" @click="buyCard('month')" />
		        </view>
		        <view class="grid-item">
		          <img style="width: 316rpx; height: 200rpx;" src="~@/static/ji_card.png" @click="buyCard('ji')" />
		        </view>
		        <view class="grid-item">
		          <img style="width: 316rpx; height: 200rpx;" src="~@/static/year_card.png" @click="buyCard('year')" />
		        </view>
		        <view class="grid-item">
		          <img style="width: 316rpx; height: 200rpx;" src="~@/static/forever_card.png" @click="buyCard('forever')" />
		        </view>
		      </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isLogin:false,
				card_no:"",
				serverQQ:"",
				cardLinks:{}
			}
		},
		onLoad(){
			var userInfo = this.appInfo.getUser();
			this.serverQQ = userInfo.server_qq;
			this.request.get({
				url:"index.php/index/member/getlinks",
				success:(res)=>{
					if(res.data.code == 1){
					  this.cardLinks = res.data.data;console.log(this.cardLinks);
					}
				}
			});
		},
		onShow(){
			this.isLogin = this.appInfo.isLogin();
			if(!this.isLogin){
				uni.navigateTo({
					url:"../login/login"
				});
			}
		},
		methods: {
			activeCard:function () {
			  if(this.card_no.length != 32){
				uni.showToast({
					icon:"none",
					title:"卡密长度不正确"
				});
				return;
			  }
			  uni.showLoading({
			  	title:"激活中..."
			  });
			  
			  this.request.post({
				  url:"index.php/index/member/active_card",
				  data:{
					  card_no:this.card_no
				  },
				  success:(res)=>{
					 uni.hideLoading(); 
					 this.card_no = "";
					 if(res.data.code ==1){
					   this.updateInfo();
					   uni.showModal({
						   title: '提示',
						   showCancel:false,
						   content: res.data.msg
					   });
					 }else{
						 uni.showToast({
						 	icon:"none",
						 	title:res.data.msg
						 });
					 }
				  },
				  fail:()=>{
					uni.hideLoading();   
				  }
			  });
			},
			openUrl:function(url){
				if(url) plus.runtime.openURL(url);
			},
			buyCard:function (type) {
			  if(type && this.cardLinks[type+"_card"]){
				this.openUrl(this.cardLinks[type+"_card"]);
				return;
			  }
			  uni.showModal({
			    title: '提示',
				showCancel:false,
			    content:'联系你的专属购买客服'+this.serverQQ+',或点击以下卡密链接购买'
			  });
			}
		}
	}
</script>

<style>
.input-box{
    padding: 60rpx 0rpx;
  }
  .input-bg{
    width: 714rpx;
    height: 105rpx;
    background: url("~@/static/kminput.png");
	background-size: cover;
    margin: auto;
  }
  .input-bg .input{
	position: absolute;
    width: 540rpx;
    height: 76rpx;
    line-height: 76rpx;
    font-size: 32rpx;
    color: #8d8d8d;
    padding: 0rpx 15rpx;
    margin-left: 120rpx;
    margin-top: 10rpx;
    border: none;
    outline: none;
  }
  .grid-box{
	padding: 20rpx;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
  }
  .grid-item{
	  width: 50%;
	  display: flex;
	  justify-content: center;
	  margin-bottom: 20rpx;
  }
</style>
